<template>
	<view class="tui-container">
		<view class="tui-login__header">
			<image class="tui-header__img" mode="widthFix" src="/static/images/login/img_login_bg_3x.png"></image>
			<view class="tui-header__inner">
				<!-- #ifndef H5 -->
				<tui-navigation-bar @init="initNavigation">
					<!-- #ifndef MP-ALIPAY || MP-BAIDU -->
					<view class="tui-header__icon" :style="{ marginTop: top + 'px' }">
						<tui-icon name="arrowleft" color="#fff" unit="rpx" :size="68" @click="back"></tui-icon>
					</view>
					<!-- #endif -->
				</tui-navigation-bar>
				<!-- #endif -->
				<view class="tui-header__title" :style="{paddingTop:top+50+'px'}">
					<text class="tui-title__text">登录</text>
					<text class="tui-sub__text">欢迎来到XXXX</text>
				</view>
			</view>
		</view>
		<view class="tui-form__box">
			<image class="tui-login__img" src="/static/images/login/img_login_3x.png" mode="widthFix"></image>
			<view class="tui-form__title">密码登录</view>
			<tui-input maxlength="18" padding="64rpx 0 20rpx" :lineLeft="false" :size="30" placeholder="请输入您的账号">
			</tui-input>
			<tui-input maxlength="20" :password="password" padding="64rpx 0 20rpx" :lineLeft="false" :size="30" placeholder="请输入密码">
				<template v-slot:right>
					<tui-icon unit="rpx" :size="44" @click="change" :name="password?'unseen':'seen'" color="#ccc"></tui-icon>
				</template>
			</tui-input>
			<view class="tui-btn__box">
				<tui-form-button radius="80rpx">立即登录</tui-form-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 20,
				password: true
			}
		},
		onLoad() {

		},
		methods: {
			initNavigation(e) {
				this.top = e.top;
			},
			back() {
				uni.navigateBack();
			},
			change() {
				this.password = !this.password
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
